<template>
  <n-layout-header>
    <div class="page-header">
      <!-- left -->
      <div class="flex items-center justify-between">
        <div class="w-[186px] flex justify-between items-center">
          <img src="~@/assets/logo.png" class="w-[109px]" />
          <img
            src="~@/assets/layout/icon_collapse.png"
            class="cursor-pointer w-[16px]"
            @click.stop="handleToggleSideBar"
          />
        </div>
        <div class="ml-[32px] w-[200px]">
          <n-input placeholder="搜索">
            <template #prefix> </template>
          </n-input>
        </div>
      </div>
      <!-- right -->
      <div class="page-header__right">
        <div class="icon-item mr-[48px]">
          <img src="~@/assets/layout/icon_lock.png" />
        </div>
        <div class="icon-item mr-[48px]">
          <img src="~@/assets/layout/icon_bell.png" />
        </div>
        <div class="switch-branch mr-[12px]" @click.stop="handleChangeBranch">
          <img src="~@/assets/layout/icon_switch.png" />
          <span>{{ getCurrentBranchName }}</span>
        </div>
        <n-dropdown
          trigger="hover"
          placement="bottom-start"
          :options="options"
          @select="handleDropdownSelect"
        >
          <div class="avatar">
            <n-avatar
              round
              size="small"
              src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
            />
            <img src="~@/assets/layout/icon_dropdown.png" />
          </div>
        </n-dropdown>
      </div>
    </div>
  </n-layout-header>
</template>
<script setup lang="ts" name="LayoutHeader">
import { reactive } from "vue";
import { useDialog, useMessage } from "naive-ui";
import { useGlobalStore } from "@/store/modules/global.store";
import { useI18n } from "vue-i18n";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import * as RouterNames from "@/router/routerNames/index";
import { useUserStore } from "@/store/modules/user.store";

const { t } = useI18n();

const options = reactive([
  {
    label: t("basic.userProfile"),
    key: "userProfile",
  },
  {
    label: t("basic.logout"),
    key: "logout",
  },
]);

const dialog = useDialog();
const message = useMessage();
const router = useRouter();
const globalStore = useGlobalStore();
const { getCurrentBranchName, logout } = useUserStore();

const { isCollapse } = storeToRefs(globalStore);

const handleToggleSideBar = () => {
  globalStore.toggleSideBar(!isCollapse.value);
};

const handleChangeBranch = () => {
  router.push({
    name: RouterNames.CHOOSE_BRANCH_PAGE.NAME,
  });
};

const handleLogout = () => {
  dialog.warning({
    title: "退出登录",
    content: "你确定要退出登录吗？",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: () => {
      logout().then(() => {
        router.push({
          name: RouterNames.LOGIN_PAGE.NAME,
          replace: true,
        });
        message.success("退出成功");
      });
    },
  });
};

const handleDropdownSelect = (key: string) => {
  if (key === "logout") {
    handleLogout();
  }
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
